<template>
	<div>
		<van-cell>
			<template #title>
				<div class="title-box">
					<!-- 标题 -->
					<span>{{ artObj.title }}</span>
					<!-- 单图 -->
					<img v-if="artObj.cover.type === 1" class="thumb"  v-lazy="artObj.cover.images[0]" alt="" />
				</div>
				<!-- 多图 -->
				<div class="thumb-box" v-if="artObj.cover.type > 1">
					<img v-for="(imgUrl, index) in artObj.cover.images" :key="index" class="thumb"  v-lazy="imgUrl"
						alt="" />
				</div>
			</template>
			<template #label>
				<div class="label-box">
					<div>
						<span>{{ artObj.aut_name }}</span>
						<span>{{ artObj.comm_count }}评论</span>
						<span>{{ formatTime(artObj.pubdate) }}</span>
					</div>
					<van-icon name="cross" @click.stop="show = true"></van-icon>
				</div>
			</template>
		</van-cell>
		<van-action-sheet v-model="show" :actions="actions" :cancel-text="bottomText" @select="onSelect"
			get-container="body" @close="closeFn" @cancel="cancelFn" />
	</div>
</template>

<script>
import { articlesListAPI } from '@/api'
import { timeAgo } from '@/utils/date.js'
import { firstActions, secondActions } from '@/api/report'
export default {
  data () {
    return {
      articleList: '',
      show: false,
      actions: firstActions,
      bottomText: '取消'
    }
  },
  props: {
    artObj: Object // 文章对象
  },
  computed: {

  },
  async created () {
    const res = await articlesListAPI({ channelId: 0 })
    this.articleList = res.data.data.results
  },
  methods: {
    formatTime: timeAgo, // 函数体是timeAgo,
    onSelect (item) {
      if (item.name === '不感兴趣') {
        this.$emit('disLikeEV', this.artObj.art_id)
        this.show = false
      } else if (item.name === '反馈垃圾内容') {
        this.actions = secondActions
        this.bottomText = '返回'
      } else {
        this.$emit('reportEV', this.artObj.art_id, item.value)
        this.show = false
      }
    },
    /* 面板的关闭事件 */
    closeFn () {
      this.actions = firstActions
      this.bottomText = '取消'
    },
    /* 面板的取消事件 */
    cancelFn () {
      if (this.bottomText === '返回') {
        this.show = true
        this.actions = firstActions
        this.bottomText = '取消'
      }
    }

  }
}
</script>

<style scoped lang="less">
/* 标题样式 */
.title-box {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}

/* label描述样式 */
.label-box {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

/* 文章信息span */
.label-box span {
	margin: 0 3px;

	&:first-child {
		margin-left: 0;
	}
}

/* 图片的样式, 矩形黄金比例：0.618 */
.thumb {
	width: 113px;
	height: 70px;
	background-color: #f8f8f8;
	object-fit: cover;
}

/* 三图, 图片容器 */
.thumb-box {
	display: flex;
	justify-content: space-between;
}
</style>
